<template>
    <div class="task-list-wrap">
        <a-menu :selectedKeys="selectedKeys" @click="handleSelectItem">
            <div
                v-infinite-scroll="getList"
                infinite-scroll-watch-disabled="scrollDisabled"
                :infinite-scroll-distance="100"
                style="flex: 1; flex-shrink: 0; overflow-y: auto"
            >
                <a-menu-item v-for="item of taskList" :key="item.id">
                    <flexbox justify="space-between">
                        <HTaskType :status="item.status" />
                        <div style="margin-left: 8px; overflow: hidden">
                            <HToolTip :title="item.requestNumber">
                                <span style="font-weight: 500; color: #172b4d">
                                    <a @click.stop="jumpTo(item.id)">{{ item.requestNumber }}</a>
                                </span>
                            </HToolTip>
                        </div>
                    </flexbox>
                </a-menu-item>
            </div>
        </a-menu>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { useRouter } from 'vue-router';
import HTaskType from './components/HTaskType.vue';
import HToolTip from '@/components/HToolTip/index.vue';
import { HDicSelect, HSuggestInput } from '@/components';
import TaskItem from './TaskItem.vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, watch, computed, getCurrentInstance } from 'vue';
export default defineComponent({
    components: {
        PlusOutlined,
        TaskItem,
        HDicSelect,
        HSuggestInput,
        HTaskType,
        HToolTip
    },
    props: {
        system: {
            type: Number,
            default: null
        }
    },
    setup(props) {
        const router = useRouter();
        const instance: any = getCurrentInstance();
        const state = reactive<any>({});
        const taskList = computed(() => {
            return store.getters.taskList;
        });
        const selectedKeys = computed(() => {
            if (currSelectIndex.value >= 0) {
                const item = taskList.value[currSelectIndex.value];
                return [item.id];
            } else {
                return [];
            }
        });
        const currSelectIndex = computed(() => {
            return store.getters.currSelectIndex;
        });
        const getList = async (isRefresh = false) => {
            store.dispatch('workbenchTaskList/getList', isRefresh);
        };
        const handleSelectItem = (val) => {
            const index = taskList.value.findIndex((item) => item.id === val.key);
            if (currSelectIndex.value === index) {
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', -1);
                instance.proxy.$mitt.emit('refreshList', {
                    relateRequireId: null
                });
            } else {
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', index);
                instance.proxy.$mitt.emit('refreshList', {
                    relateRequireId: val.key
                });
            }
        };
        const jumpTo = (id) => {
            router.push({
                path: '/taskRequire/taskDetail',
                query: {
                    id
                }
            });
        };
        // 更新该业务需求
        instance.proxy.$mitt.on('refreshTaskList', (query, isRefresh = false) => {
            store.commit('workbenchTaskList/SET_SCROLLDISABLED', false);
            getList(true);
        });
        watch(
            () => props.system,
            (n) => {
                store.commit('workbenchTaskList/SET_SCROLLDISABLED', false);
                store.commit('workbenchTaskList/SET_QUERY', {
                    pageNum: 1,
                    requestSystem: n
                });
                getList();
                store.commit('workbenchTaskList/SET_CURRSELECTINDEX', -1);
            },
            { immediate: true }
        );
        return {
            selectedKeys,
            taskList,
            ...toRefs(state),
            getList,
            handleSelectItem,
            jumpTo
        };
    }
});
</script>

<style scoped lang="less">
.task-list-wrap {
    width: 200px;
    height: 400px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}
</style>